<template>
    <div
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="disabled"
        infinite-scroll-distance="distance"
        infinite-scroll-immediate-check="immediateCheck"
    >
        <slot :hasNext="hasNext">
            <!-- <no-data :text="text" v-if="!hasNext" @click.native="noDataClick" /> -->
        </slot>
        <slot name="foot">
            <div class="loading-more">
                <span class="loading-more-text">
                    <template v-if="hasNext"> 加载中... </template>
                    <template v-else-if="$slots.default"> 没有更多了 </template>
                </span>
            </div>
        </slot>
    </div>
</template>

<script>
import infiniteScroll from '@/plugins/infinite-scroll/directive'; // 下拉加载

export default {
    name: 'InfiniteScroll',
    data() {
        return {
            hasNext: true,
            activated: true,
        };
    },
    directives: {
        infiniteScroll,
    },
    props: {
        distance: {
            type: Number,
            default: 150,
        },
        immediateCheck: {
            type: Boolean,
            default: false,
        },
        text: {
            type: String,
        },
    },
    computed: {
        disabled() {
            //加载中 或者 没有下一页 置为无效
            return !this.hasNext || !this.activated;
        },
    },
    methods: {
        loadMore() {
            this.$emit('loadMore', (bol) => {
                this.$nextTick(() => {
                    this.hasNext = bol;
                });
            });
        },
        reSet() {
            this.hasNext = true;
            if (this.immediateCheck) {
                this.loadMore();
            }
        },
        noDataClick() {
            this.$emit('emptyClick');
        },
    },
    deactivated() {
        this.activated = false;
    },
    activated() {
        this.activated = true;
    },
};
</script>
<style lang="scss" scoped>
.loading-more {
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    .loading-more-text {
        font-size: 14px;
        color: #999;
    }
}
</style>
